﻿@{
    ViewBag.Title = "UploadImage";
    Layout = "~/Views/Share/_Layout.cshtml";
}

@section css
{
    <link href="~/Content/web-uploader/webuploader.css" rel="stylesheet" />
}
@section scripts
{
    <script src="~/Content/web-uploader/webuploader.html5only.min.js"></script>

    <script>
        var BASE_URL = "/Content/web-uploader";
        $(function () {
            // 初始化Web Uploader
            var uploader = WebUploader.create({

                file: { id: "uploader-demo" },

                // 选完文件后，是否自动上传。
                auto: true,

                // swf文件路径
                // swf: BASE_URL + '/Uploader.swf',

                // 文件接收服务端。
                server: '/UI/UploadImages/',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',

                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                        '</div>'
                        ),
                    $img = $li.find('img');


                // $list为容器jQuery实例
                var $list = $('#fileList');
                $list.append($li);

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, 100, 100);
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
                $('#p').text((percentage * 100 + '%'));
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file) {
                $('#' + file.id).addClass('upload-state-done');
            });

            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();
            });

        });
    </script>
}

@section head{
        
        <div class="col-sm-4">
            <ol class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/">UI&控件</a>
                </li>
                <li class="active">
                    <strong>Upload Image</strong>
                </li>
            </ol>
        </div>

}

<h2>UploadImage</h2>
<div class="row"> 
    <div class="col-lg-3">
        <!--dom结构部分-->
        <div id="uploader-demo">
            <!--用来存放item-->
            <div id="fileList" class="uploader-list"></div>
            <div id="filePicker" style="font-size:x-small;">选择图片</div>
        </div>
        <span id="p"></span>
    </div>
    <!-- /.col-lg-3 -->
</div>